<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PhotoSphereViewer - virtual tour demo</title>

        <link rel="stylesheet" href="/dist/core/index.css" />
        <link rel="stylesheet" href="/dist/markers-plugin/index.css" />
        <link rel="stylesheet" href="/dist/gallery-plugin/index.css" />
        <link rel="stylesheet" href="/dist/map-plugin/index.css" />
        <link rel="stylesheet" href="/dist/plan-plugin/index.css" />
        <link rel="stylesheet" href="/dist/virtual-tour-plugin/index.css" />
        <link rel="stylesheet" href="/node_modules/leaflet/dist/leaflet.css" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="photosphere"></div>

        <script type="importmap">
            {
                "imports": {
                    "three": "/node_modules/three/build/three.module.js",
                    "leaflet": "/node_modules/leaflet/dist/leaflet-src.esm.js",
                    "@photo-sphere-viewer/core": "/dist/core/index.module.js",
                    "@photo-sphere-viewer/gallery-plugin": "/dist/gallery-plugin/index.module.js",
                    "@photo-sphere-viewer/map-plugin": "/dist/map-plugin/index.module.js",
                    "@photo-sphere-viewer/plan-plugin": "/dist/plan-plugin/index.module.js",
                    "@photo-sphere-viewer/markers-plugin": "/dist/markers-plugin/index.module.js",
                    "@photo-sphere-viewer/virtual-tour-plugin": "/dist/virtual-tour-plugin/index.module.js"
                }
            }
        </script>

        <script type="module">
            import { Viewer } from '@photo-sphere-viewer/core';
            import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
            import { MapPlugin } from '@photo-sphere-viewer/map-plugin';
            import { PlanPlugin } from '@photo-sphere-viewer/plan-plugin';
            import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
            import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin';

            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
            const caption = 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>';

            const markerLighthouse = {
                id: 'marker-1',
                image: baseUrl + 'pictos/pin-red.png',
                tooltip: 'Cape Florida Light, Key Biscayne',
                size: { width: 32, height: 32 },
                anchor: 'bottom center',
                gps: [-80.155975, 25.66668, 29 + 3],
                data: {
                    map: { image: baseUrl + 'pictos/pin-red.png', size: 25 },
                    plan: { image: baseUrl + 'pictos/pin-red.png', size: 25 },
                },
            };

            // links.position is used in manual mode
            // links.gps or node.gps is used in GPS mode
            const nodes = [
                {
                    id: '1',
                    panorama: baseUrl + 'tour/key-biscayne-1.jpg',
                    thumbnail: baseUrl + 'tour/key-biscayne-1-thumb.jpg',
                    name: 'One',
                    caption: `[1] ${caption}`,
                    links: [{ nodeId: '2', position: { pitch: 0, yaw: '100deg' } }],
                    markers: [
                        {
                            ...markerLighthouse,
                            position: { yaw: '105deg', pitch: '35deg' }, // only used in manual mode
                        },
                    ],
                    gps: [-80.15635, 25.66675, 3],
                    sphereCorrection: { pan: '33deg' },
                    map: { x: 660, y: 570, color: '#fffd99' },
                    plan: { color: '#fffd99' },
                },
                {
                    id: '2',
                    panorama: baseUrl + 'tour/key-biscayne-2.jpg',
                    thumbnail: baseUrl + 'tour/key-biscayne-2-thumb.jpg',
                    name: 'Two',
                    caption: `[2] ${caption}`,
                    links: [
                        { nodeId: '3', position: { pitch: 0, yaw: '120deg' } },
                        { nodeId: '1', position: { pitch: 0, yaw: '280deg' } },
                    ],
                    markers: [
                        {
                            ...markerLighthouse,
                            position: { yaw: '100deg', pitch: '55deg' }, // only used in manual mode
                        },
                    ],
                    gps: [-80.15611, 25.6667, 5],
                    sphereCorrection: { pan: '42deg' },
                    map: { x: 750, y: 590, color: '#ffb075' },
                    plan: { color: '#ffb075' },
                },
                {
                    id: '3',
                    panorama: baseUrl + 'tour/key-biscayne-3.jpg',
                    thumbnail: baseUrl + 'tour/key-biscayne-3-thumb.jpg',
                    name: 'Three',
                    caption: `[3] ${caption}`,
                    links: [
                        { nodeId: '2', position: { pitch: 0, yaw: '310deg' } },
                        { nodeId: '4', position: { pitch: 0, yaw: '220deg' } },
                        { nodeId: '5', position: { pitch: 0, yaw: '270deg' }, linkOffset: { depth: 2 } },
                    ],
                    gps: [-80.15593, 25.66659, 5],
                    sphereCorrection: { pan: '50deg' },
                    map: { x: 815, y: 640, color: '#b7c1ff' },
                    plan: { color: '#b7c1ff' },
                },
                {
                    id: '4',
                    panorama: baseUrl + 'tour/key-biscayne-4.jpg',
                    thumbnail: baseUrl + 'tour/key-biscayne-4-thumb.jpg',
                    name: 'Four',
                    caption: `[4] ${caption}`,
                    links: [
                        { nodeId: '3', position: { pitch: 0, yaw: '40deg' } },
                        { nodeId: '5', position: { pitch: 0, yaw: '300deg' } },
                    ],
                    gps: [-80.15611, 25.666435, 3],
                    sphereCorrection: { pan: '-78deg' },
                    map: { x: 750, y: 705, color: '#64dbdb' },
                    plan: { color: '#64dbdb' },
                },
                {
                    id: '5',
                    panorama: baseUrl + 'tour/key-biscayne-5.jpg',
                    thumbnail: baseUrl + 'tour/key-biscayne-5-thumb.jpg',
                    name: 'Five',
                    caption: `[5] ${caption}`,
                    links: [
                        { nodeId: '6', position: { pitch: 0, yaw: '280deg' } },
                        { nodeId: '3', position: { pitch: 0, yaw: '70deg' } },
                        { nodeId: '4', position: { pitch: 0, yaw: '150deg' } },
                    ],
                    gps: [-80.15628, 25.666485, 3],
                    sphereCorrection: { pan: '170deg' },
                    map: { x: 685, y: 685, color: '#9c9af9' },
                    plan: { color: '#9c9af9' },
                },
                {
                    id: '6',
                    panorama: baseUrl + 'tour/key-biscayne-6.jpg',
                    thumbnail: baseUrl + 'tour/key-biscayne-6-thumb.jpg',
                    name: 'Six',
                    caption: `[6] ${caption}`,
                    links: [
                        { nodeId: '7', position: { pitch: 0, yaw: '-60deg' } },
                        { nodeId: '5', position: { pitch: 0, yaw: '130deg' } },
                    ],
                    gps: [-80.156465, 25.666486, 2],
                    sphereCorrection: { pan: '65deg' },
                    map: { x: 615, y: 685, color: '#de91f2' },
                    plan: { color: '#de91f2' },
                },
                {
                    id: '7',
                    panorama: baseUrl + 'tour/key-biscayne-7.jpg',
                    thumbnail: baseUrl + 'tour/key-biscayne-7-thumb.jpg',
                    name: 'Seven',
                    caption: `[7] ${caption}`,
                    links: [{ nodeId: '6', position: { pitch: 0, yaw: '80deg' } }],
                    gps: [-80.15709, 25.66634, 3],
                    sphereCorrection: { pan: '110deg', pitch: -3 },
                    map: { x: 385, y: 745, color: '#8bed82' },
                    plan: { color: '#8bed82' },
                },
            ];

            const nodesById = {};
            nodes.forEach((node) => (nodesById[node.id] = node));

            const viewer = new Viewer({
                container: 'photosphere',
                loadingImg: baseUrl + 'loader.gif',
                defaultYaw: '100deg',
                plugins: [
                    MarkersPlugin,
                    [GalleryPlugin, {
                        // visibleOnLoad: true,
                        // hideOnClick: false,
                    }],
                    [MapPlugin, {
                        static: true,
                        maxZoom: 150,
                    }],
                    [PlanPlugin, {
                        position: 'bottom right',
                        defaultZoom: 18,
                    }],
                    [VirtualTourPlugin, {
                        positionMode: 'gps',
                        renderMode: '3d',
                        startNodeId: nodes[1].id,
                        preload: true,
                        // showLinkTooltip: false,
                        transitionOptions: {
                            // showLoader: false,
                            // speed: '10rpm',
                            // fadeIn: false,
                            // rotation: false,
                        },

                        getLinkTooltip(content, link, node) {
                            return `${content}<pre>Node #${node.id}</pre>`;
                        },
                        arrowStyle: {
                            // image: 'https://www.svgrepo.com/show/181247/upload-arrows.svg',
                            // size: { width: 80, height: 80 },
                            // style: { cursor: 'help' },
                        },

                        // client mode
                        dataMode: 'client',
                        nodes: nodes,

                        map: {
                            imageUrl: baseUrl + 'tour/key-biscayne-map.jpg',
                            size: { width: 1600, height: 1200 },
                            extent: [-80.158123, 25.66805, -80.153824, 25.665308],
                        },

                        // server mode (mock)
                        // dataMode: 'server',
                        // getNode: (nodeId) => {
                        //     console.log('GET node ' + nodeId);
                        //     return new Promise((resolve) => {
                        //         setTimeout(() => resolve({
                        //             ...nodesById[nodeId],
                        //             links: nodesById[nodeId].links.map((link) => ({
                        //                 ...link,
                        //                 gps: nodesById[link.nodeId].gps,
                        //             })),
                        //         }), 200)
                        //     });
                        // },
                    }],
                ],
            });

            const virtualTour = viewer.getPlugin(VirtualTourPlugin);
            const markers = viewer.getPlugin(MarkersPlugin);

            virtualTour.addEventListener('enter-arrow', ({ link }) => {
                console.log(`enter link ${link.nodeId}`);
            });

            virtualTour.addEventListener('leave-arrow', ({ link }) => {
                console.log(`leave link ${link.nodeId}`);
            });

            markers.addEventListener('enter-marker', ({ marker }) => {
                if (marker.data?.tourLink) {
                    console.log(`enter link ${marker.data.tourLink.nodeId}`);
                }
            });

            markers.addEventListener('leave-marker', ({ marker }) => {
                if (marker.data?.tourLink) {
                    console.log(`leave link ${marker.data.tourLink.nodeId}`);
                }
            });

            window.viewer = viewer;
        </script>
    </body>
</html>
